<template>
    <div class="components_page">
        <ul class="navbar">
            <li v-for="item in tabBar" :key="item.id" @click="checkTab(item.id)">
                <span class="tab" :class="[currentTabBarId == item.id ? 'nav_active' : '']">{{item.title}}</span>
                <img src="@/assets/black_arrow.png" class="arrow" v-if="currentTabBarId != item.id"/>
                <img src="@/assets/yellow_arrow.png" class="arrow" v-else/>
                <transition name="fade">
                    <div class="triangle up" v-if="showFilter && currentTabBarId == item.id"></div>
                </transition>
            </li>
        </ul>
        <transition name="fade">
            <div class="filter_content" v-if="showFilter">
                <ul class="filter_list">
                    <li v-if="currentTabBarId == 1" :class="item.check ? 'filter_active' : ''" v-for="item in filterList.categoryList" :key="item.index" v-text="item.subtitle" @click="checkSub(item.id,'categoryList')"></li>
                    <li v-if="currentTabBarId == 2" :class="item.check ? 'filter_active' : ''" v-for="item in filterList.brandList" :key="item.index" v-text="item.subtitle" @click="checkSub(item.id,'brandList')"></li>
                    <li v-if="currentTabBarId == 3" :class="item.check ? 'filter_active' : ''" v-for="item in filterList.seriesList" :key="item.index" v-text="item.subtitle" @click="checkSub(item.id,'seriesList')"></li>
                    <li v-if="currentTabBarId == 4" :class="item.check ? 'filter_active' : ''" v-for="item in filterList.priceList" :key="item.index" v-text="item.subtitle" @click="checkSub(item.id,'priceList')"></li>
                       </ul>
                <div class="filter_btn">
                    <p class="cancel" @click="handleCancel(1)">清空</p>
                    <p class="submit" @click="handleSubmit">确认</p>
                </div>
            </div>
        </transition>
        <div class="public_shade" v-if="showFilter" @click="handleSubmit2"></div>

        <ul class="checkList">
            <!-- <li v-for="sub in checkedList" :key="sub.index" @click="delSub(sub)">{{sub}} X</li> -->
            <p class="clear"></p>
        </ul>
    </div>
</template>

<script>
import { getCarBrandList, getCarModelList, getCarShopList } from '@/api/api'
export default {
  name: '',
  data () {
    return {
      category: '',
      brand: '',
      price: '',
      series: '',
      // carList: [],
      showList: true,
      showFilter: false,
      tabBar: [
        { id: 1, title: '品类' },
        { id: 2, title: '品牌' },
        { id: 3, title: '车系' },
        { id: 4, title: '价格' }
      ],
      checkedList: [],
      currentTabBarId: 0, // 控制显示隐藏 样式层
      checkedTabBarId: 0, // 当前选中tab 行为层
      filterList: {
        categoryList: [
          { id: 'categoryList1', subtitle: '轻卡', check: false },
          { id: 'categoryList2', subtitle: '微卡', check: false },
          { id: 'categoryList3', subtitle: '中卡', check: false },
          { id: 'categoryList4', subtitle: 'SUV', check: false },
          { id: 'categoryList5', subtitle: '自卸车', check: false },
          { id: 'categoryList6', subtitle: '专用车', check: false },
          { id: 'categoryList7', subtitle: 'MPV', check: false }
        ],
        brandList: [],
        seriesList: [],
        priceList: [
          { id: 'priceList1', subtitle: '5万以下', check: false },
          { id: 'priceList2', subtitle: '5-8万', check: false },
          { id: 'priceList3', subtitle: '8-12万', check: false },
          { id: 'priceList4', subtitle: '12-20万', check: false },
          { id: 'priceList5', subtitle: '20万以上', check: false }
        ]
      },
      checkSeries: [],
      obj: {
        '5万以下': 1,
        '5-8万': 2,
        '8-12万': 3,
        '12-20万': 4,
        '20万以上': 5
      }
    }
  },
  created () {
    this.getFilterList('')
    this.getShopList()
  },
  methods: {
    getShopList () {
      let param = {
        category: this.category,
        brand: this.brand,
        series: this.series,
        price: this.price
      }
      // 购车商城车辆列表
      getCarShopList(param).then(res => {
        this.carList = JSON.parse(res.data)
        this.$emit('getCarList', this.carList)
      })
    },
    getFilterList (brands) {
      let param = {
        brand: brands
      }
      // 获取车辆品牌
      getCarBrandList().then(res => {
        let temArr = JSON.parse(res.data)
        for (let i = 0; i < temArr.length; i++) {
          temArr[i].subtitle = temArr[i].brandName
          temArr[i].id = 'brandList' + i + 1
          temArr[i].check = false
          delete temArr[i].brandName
        }
        this.filterList.brandList = temArr
      })
      // 获取车系
      getCarModelList(param).then(res => {
        let temArr = JSON.parse(res.data)
        for (let i = 0; i < temArr.length; i++) {
          temArr[i].subtitle = temArr[i].seriesName
          temArr[i].id = 'seriesList' + i + 1
          temArr[i].check = false
          delete temArr[i].seriesName
        }
        this.filterList.seriesList = temArr
      })
    },
    checkTab (id) {
      this.currentTabBarId = id
      this.checkedTabBarId = id
      this.showFilter = true
      this.checkedList = []
      document.body.style.overflow = 'hidden'
    },

    checkSub (id, type) {
      for (let i = 0; i < this.filterList[type].length; i++) {
        if (this.filterList[type][i].id === id) {
          this.filterList[type][i].check = !this.filterList[type][i].check
        }
      }
    },
    handleCancel (type) {
      let that = this
      let sub = ''
      if (this.checkedTabBarId === 1) {
        sub = 'categoryList'
      } else if (this.checkedTabBarId === 2) {
        sub = 'brandList'
      } else if (this.checkedTabBarId === 3) {
        sub = 'seriesList'
      } else if (this.checkedTabBarId === 4) {
        sub = 'priceList'
      }
      for (let i = 0; i < this.filterList[sub].length; i++) {
        that.filterList[sub][i].check = false
      }
      return
      this.showFilter = false
      this.currentTabBarId = 0
      document.body.style.overflow = 'auto'
      this.getCheckSub()
    },
    handleSubmit () {
      this.showFilter = false
      this.currentTabBarId = 0
      document.body.style.overflow = 'auto'
      this.getCheckSub()
    },
    handleSubmit2 () {
      this.showFilter = false
      this.currentTabBarId = 0
      document.body.style.overflow = 'auto'
    },
    getCheckSub () {
      this.checkedList = []
      var arr = ['categoryList', 'brandList', 'seriesList', 'priceList']
      this.category = ''
      this.brand = ''
      this.series = ''
      this.price = ''
      var tempArr = {
        category: [],
        brand: [],
        series: [],
        price: []
      }
      for (var i = 0; i < arr.length; i++) {
        for (var k = 0; k < this.filterList[arr[i]].length; k++) {
          if (this.filterList[arr[i]][k].check) {
            // console.log(this.filterList[arr[i]][k])
            // add checked sub
            // 筛选品类
            this.checkedList.push(this.filterList[arr[i]][k].subtitle)
            // let param = this.checkedList.join(',')
            let ids = this.filterList[arr[i]][k].id
            // let param = this.filterList[arr[i]][k].subtitle
            if (ids.indexOf('category') > -1) {
              tempArr.category.push(this.filterList[arr[i]][k].subtitle)
              this.category = tempArr.category.join(',')
            } else if (ids.indexOf('brand') > -1) {
              tempArr.brand.push(this.filterList[arr[i]][k].subtitle)
              this.brand = tempArr.brand.join(',')
            } else if (ids.indexOf('series') > -1) {
              tempArr.series.push(this.filterList[arr[i]][k].subtitle)
              this.series = tempArr.series.join(',')
            } else if (ids.indexOf('price') > -1) {
              tempArr.price.push(this.obj[this.filterList[arr[i]][k].subtitle])
              this.price = tempArr.price.join(',')
            }
          } else {
            this.checkedList.remove(this.filterList[arr[i]][k].subtitle)
          }
        }
      }
      this.getShopList()
      this.getFilterList(this.brand)
    },
    delSub (sub) {
      var tempArr = { cacheArr: [] }
      let that = this
      this.checkedList.remove(sub)
      for (let i = 0; i < this.filterList.categoryList.length; i++) {
        if (sub === this.filterList.categoryList[i].subtitle) {
          this.filterList.categoryList[i].check = false
          that.category = that.fixParams(tempArr.cacheArr, sub, that.category)
        }
      }
      for (let j = 0; j < this.filterList.brandList.length; j++) {
        if (sub === this.filterList.brandList[j].subtitle) {
          this.filterList.brandList[j].check = false
          that.brand = that.fixParams(tempArr.cacheArr, sub, that.brand)
        }
      }
      for (let z = 0; z < this.filterList.seriesList.length; z++) {
        if (sub === this.filterList.seriesList[z].subtitle) {
          this.filterList.seriesList[z].check = false
          that.series = that.fixParams(tempArr.cacheArr, sub, that.series)
        }
      }
      for (let z = 0; z < this.filterList.priceList.length; z++) {
        if (sub === this.filterList.priceList[z].subtitle) {
          this.filterList.priceList[z].check = false
          that.price = that.fixParams(tempArr.cacheArr, sub, that.price)
        }
      }
      this.getShopList()
    },
    fixParams (originArr, delSub, params) {
      originArr = params.split(',')
      originArr.remove(delSub)
      params = originArr.join(',')
      return params
    }
  }
}
Array.prototype.indexOf = function (val) {
  for (var i = 0; i < this.length; i++) {
    if (this[i] === val) return i
  }
  return -1
}

Array.prototype.remove = function (val) {
  var index = this.indexOf(val)
  if (index > -1) {
    this.splice(index, 1)
  }
}
</script>
<style scoped>
.grey{
  background:#fff;
}
 .navbar{
        width:96%;
        height:85px;
        padding:0 2%;
        background: #fff;
        border-bottom:1px solid #ececec;
        position: fixed;
        left:0;
        top:0;
        z-index: 999;
    }

    .navbar > li{
        width:25%;
        height:inherit;
        line-height: 85px;
        text-align: center;
        float: left;
        position: relative;
    }

    .checkList{
        width:96%;
        height:auto;
        /* min-height: 85px; */
        background: #EEEEF0;
        padding:85px 2% 0;
    }

    .clear{
        width:100%;
        height:1px;
        clear: both;
    }

    .checkList > li{
        padding:8px 15px;
        margin:20px 10px;
        border:1px solid #19B6FF;
        color: #19B6FF;
        font-size: 20px;
        float: left;
    }

    .tab{
        font-size: 28px;
        color: #323232;
    }

    .nav_active{
        color: #FF6B23;
    }

    .arrow{
        width:12px;
        height:7px;
        vertical-align: middle;
    }

    .filter_content{
        width:100%;
        height:auto;
        /* padding:50px 2.5% 0 3.5%; */
        background: #fff;
        position: fixed;
        left:0;
        top:86px;
        z-index: 999;
    }

    .filter_list{
        /* width:95%; */
        height:auto;
        max-height:500px;
        overflow: scroll;
        padding:50px 1% 0 4%;
        box-sizing: border-box;
        word-wrap: break-word;
    }

    .filter_list > li{
       display: inline-block;
        border:1px solid #e7e7e7;
        /* float: left; */
        margin:0 2% 30px;
        /* line-height: 68px; */
        text-align: center;
        color: #666;
        padding:15px 40px;
        /* font-size: 20px; */
        border-radius:5%;
    }

    .filter_active{
        border:1px solid #589BEC !important;
        background: #EEF5FD;
        color: #589BEC !important;
    }

    .filter_btn{
        width:100%;
        height:95px;
        padding-top:60px;
        clear: both;
    }
    .filter_btn > p{
        width: 50%;
        height:inherit;
        line-height: 95px;
        text-align: center;
        font-size: 32px;
        float: left;
    }
    .cancel{
        color: #666;
        background: #fff;
        border-top:1px solid #D6D7DC;
    }

    .submit{
        color: #fff;
        background: #589BEC;
        border-top:1px solid #589BEC;
    }
    .triangle {
        position: absolute;
        left:40%;
        bottom:-5px;
        width: 13px;
        height: 13px;
        background: #fff;
    }
    .up {
        display: inline-block;
        border-top: 2px solid #e7e7e7;
        border-right: 2px solid #e7e7e7;
        transform: rotate(-45deg);
    }
</style>
